<template>
  <view class="container">
    <view class="content">
      <view class="title">
        账号登录
      </view>
      <view class="p">
        欢迎来到管理系统
      </view>
      <view class="loginbox">
        <u-input type="text" border="bottom" v-model="formData.username" placeholder="请输入账号" />
        <u-input class="mt-[30rpx] p-0" type="password" border="bottom" v-model="formData.password" placeholder="请输入密码" />
        
        <view class="mt-[50rpx]">
          <u-button type="primary" :disabled="disabled" @click="handleLogin">立即登录</u-button>
          <u-button v-if="isComWx" class="flex mt-[30rpx]" type="primary" plain @click="handleQyLogin">
            <view class="icon-qywx"></view>
            企微一键登录
          </u-button>
        </view>
        
      </view>
    </view>
    
  </view>
</template>

<script lang="ts" setup>
import { loginApi } from '@/addon/htscrm/api';
import useAdminStore from '@/addon/htscrm/stores/admin';
import { computed, ref } from 'vue';

const adminStore = useAdminStore()

// 表单数据
const formData = ref({
  username: '',
  password: ''
});

// 是否是企业微信
const isComWx = computed(() => {
  return /wxwork/i.test (navigator.userAgent)
});

const disabled = computed(() => {
  if(!formData.value.username || formData.value.username.length<4) {
    return true
  }
  if(!formData.value.password || formData.value.password.length<4) {
    return true
  }
  return false
})

/**
 * 账号登录
 */
async function handleLogin() {
  const res = await loginApi(formData.value)

	if(res.code == 1) {
		uni.setStorageSync('old_admin_token', res.data.token)
		uni.setStorageSync('old_admin_userinfo', res.data.userinfo)
		adminStore.setAdminToken(res.data.token)
		adminStore.setUserInfo(res.data.userinfo)
		uni.showToast({title:'登录成功',icon:"none"})
		uni.redirectTo({
			url:"/addon/htscrm/pages/admin/index"
		})
	}
  
}

/**
 * 企业微信一键登录
 */
function handleQyLogin() {
  console.log(formData.value)

}
 
</script>


<style scoped lang="scss">
.container{
  background: #fff url(http://static.fastht.com/cb3dccd952fdcd41/6c81af5ef106952f.jpg) center/cover no-repeat;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
	.content{
		background: #fff;
		border-radius: 26rpx;
		box-sizing: border-box;
		padding: 40rpx;
		margin: 0 auto;
		width: 680rpx;
		// height: 900rpx;
		margin-top: 200rpx;
		position: relative;
		padding-top: 130rpx;
		padding-bottom: 130rpx;
	}
	.login-head{
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		z-index: 2;
		left: 236rpx;
		top: -100rpx;
		border-radius: 250rpx;
		border:2px solid #fff;
		
	}
	.title{
		font-size: 52rpx;
	}
	.p{
		font-size: 28rpx;
		    margin-top: 10rpx;
		    color: #888;
	}
	.loginbox{
		margin-top: 60rpx;
	}
	input{
	    padding: 20rpx;
	    height: 120rpx;
	    border-bottom: 2rpx solid #eee;
	    box-sizing: border-box;
		font-size: 36rpx;
		margin: 10rpx 0;
	}
	.login-btnbox{
		margin-top: 50rpx;
	}
	.icon-qywx {
		width: 50rpx;
		height: 50rpx;
		background: url('http://static.fastht.com/a7f2cd32a47e0331/b4f10b0b6dcc2c8d.png') center/100% no-repeat;
		margin-right: 20rpx;
	}
</style>
